<template>
  <nav-bar>
    <template v-slot:left></template>
    <template v-slot:default>用户登录</template>
    <template v-slot:right></template>
  </nav-bar>

  <div style="margin-top:50px">
    <img src="~assets/images/logo.png" width="100" alt="">
  </div>
  <van-form @submit="onSubmit">
    <van-field
        v-model="email"
        name="邮箱"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
    />
    <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;text-align:left">
      <a href="javascript:" style="color:#42b983" @click="$router.push({name: 'Register'})">没有账号，立即注册</a>
    </div>
    <div style="margin: 16px;">
      <van-button round block type="success" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script>
import {ref, reactive, toRefs, onMounted} from "vue"
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'

import {Toast} from 'vant'

import NavBar from "components/common/navbar/NavBar"
import {login} from 'network/user'

export default {
  name: "Login",
  components: {
    NavBar,
  },

  setup(props, {stage, emit, slots}) {
    const userinfo = reactive({
      email: '',
      password: '',
    })
    const router = useRouter()
    const store = useStore()
    const onSubmit = () => {
      login(userinfo).then(res => {
        window.localStorage.setItem('token', res.access_token)
        Toast.success('登录成功')
        store.commit('setIsLogin', true)
        userinfo.email = '';
        userinfo.password = '';
        setTimeout(() => router.go(-1), 500)
      })
    }
    return {
      ...toRefs(userinfo), onSubmit
    }
  }
}
</script>

<style scoped>

</style>